<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"//>	
		<link rel="stylesheet" type="text/css" href="../../css/app.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style type="text/css">
			.mui-pull-left{
    			color: #FFFFFF;	
	    		line-height:44px ;
	    	}
	    	.mui-pull-right{
	    		color: #FFFFFF;	
	    		line-height:44px ;
	    		
	    	}
	    	.mui-title{
	    		color: #FFFFFF;
	    	}
	    	.mui-icon.iconfont{
	    		font-size: 18px;
	    	}
	    	nav .mui-icon{
	    		left:50%;
	    		margin-left: -12px;
	    	}
	    	.mui-bar.mui-bar-nav{
	    		background: #0072dc;
	    	}
	    	
	    	.mui-control-item.text_submain{
	    		line-height: 32px;
	    	}
	    	.topic_content img{
	    		width: auto !important;
	    		height: auto !important;
	    		max-width: 100%;
	    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i> 
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>		
			<h1 class="mui-title" id="title">{{circleInfo.CircleName}}</h1>
			<a @tap='addQuestion' class="mui-pull-right">
			<i class="mui-icon iconfont">&#xe678;</i>
			</a>	
		</header>
		<div class="mui-content">
			<div class="circle-header mui-table-view-cell bg_white">
				<img :src="circleInfo.CircleImg" class="mui-pull-left circle-img" id="circleImg" style="margin-left: 10px;">
				<p class="text_main label-title"><span id="circleName">{{circleInfo.CircleName}}</span></p>						
				<p class="text_subnote"><span>话题: <span id="topicsNum">{{circleInfo.TopicCount}}</span></span>&emsp;<span>成员: <span id="membersNum">{{circleInfo.MemberCount}}</span></span></p>
				<div @tap="join" class="mui-btn mui-btn-primary btn-follow-rec" style="margin-right: 80px;" id="joinStatus">{{joinText}}</div>
				<div @tap="follow" class="mui-btn mui-btn-primary btn-follow-rec" style="margin-right: 10px;" id="followStatus">{{followText}}</div>
			</div>
		    <div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#question">
						话题
					</a>
					<a class="mui-control-item" href="#member">
						成员
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group" style="height: 600px;">
					<div id="question" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperQuestion' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollQuestion' style="min-height: 300px;" class="mui-scroll" data-type='question'>
								<ul class="mui-table-view app-hide">
									<li @tap='goQuestion(question.ID)' v-for="question in questions" class="mui-table-view-cell">
										<div class="card-topic_header">
											<i class="mui-pull-left mui-icon iconfont i_label_little"  style="color: #666666;line-height: 25px;margin-right: 5px;"><img :src="question.Avatar" alt="" style="border-radius: 50%;width: 20px;height: auto;"></i>
											<p><span class="text_main card_username">{{question.Name}}</span>
												<span class="text_main">发表了话题</span>
											</p>					
										</div>
										<div class="card-topic_content" style="margin-top:2px;">
											<div class="card-topic-title">
											<p class="topic_title text_main">{{question.Title}}</p>
											</div>
											<div class="topic_content">						
												<p class="card_content_attr text_submain">
													<span>{{{question.Content}}}</span>
												</p>
												<p class="text_note card_note-fr">
													<i class="iconfont text_main">&#xe63e;</i>
													<span class="">{{question.Commentsnum}}</span>
												</p>
											</div>
										</div>				
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="member" class="mui-slider-item mui-control-content">
						<div id='wrapperMember' style="min-height: 300px;" class="mui-scroll-wrapper">
							<div id='scrollMember' style="min-height: 300px;" class="mui-scroll" data-type='member'>
								<ul class="mui-table-view app-hide">
									<li @tap='goMember(member.ID, member.Name)' v-for="member in members" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label"  style="color: #666666;"><img :src="member.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{member.Name}}</span>
										</p>	
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
				var vm=new Vue({
					el:'#app',
					data: {
						cid:'',
						circleInfo:{},
						questions:[],
						members:[],
						scrollQuestion:{},
						scrollMember:{},
						paramObj:{
							PageSize:6,
							CurPageQuestion:1,
							CurPageMember:1,
						}
					},
					computed:{
						joinText:function () {
							var resultText = '';
							if(this.circleInfo.joinStatus == 0){
								resultText = '加入';
							}else if(this.circleInfo.joinStatus==1){
								resultText = '审核中';
							}else if(this.circleInfo.joinStatus==2){
								resultText = '退出';
							}
							return resultText;
						},
						followText:function () {
							var resultText = '';
							if(this.circleInfo.followStatus == 0){
								resultText = '关注';
							}else if(this.circleInfo.followStatus==1){
								resultText = '不关注';
							}
							return resultText;
						}
					},
					ready:function () {
						var me = this;
						$('#app .app-hide').show();
						mui.init();
//						ui.fixScroll(0);
						me.scrollQuestion=ui.setPullToRefresh('#wrapperQuestion','#scrollQuestion',this.getQuestion);
						me.scrollMember=ui.setPullToRefresh('#wrapperMember','#scrollMember',this.getMember);
						mui.plusReady(function () {
								me.getCircleInfo();
								me.getQuestion(true);
								me.getMember(true);
						});
						document.addEventListener('reloadQuestions',function () {
							me.getQuestion(true);
						},false);
					},
					methods:{
						addQuestion: function(){
							openPage('addQuestion.html','addQuestion',{circleID: this.cid});
						},
						goQuestion:function(qid){
							if(!qid){
								alert('qid 为空，无法跳转！');
								return;
							}
							openPage('../circle/question.html','question',{qid:qid,circleName:this.circleInfo.CircleName})
						},
						goMember:function(mid, mname){
							if(!mid){
								alert('mid 为空，无法跳转！');
								return;
							}
							openPage('../circle/otherCenter.html','otherCenter_'+mid,{uid:mid, uname: mname})
						},
						join: function(){
							var me = this;
							if(this.circleInfo.joinStatus == 0){
								ajax.post(api.circle.join,{ID: me.cid},function () {
									this.circleInfo.joinStatus=1;
								})
							}else if(this.circleInfo.joinStatus==1){
								return;
							}else if(this.circleInfo.joinStatus==2){
								mui.confirm("确定要退出圈子吗？","学园",["确定","取消"],function (e) {
									if(e.index === 0){
										ajax.post(api.circle.unJoin,{ID: me.cid},function () {
											this.circleInfo.joinStatus=0;
										})
									}
								});
							}
						},
						follow: function(){
							var me = this;
							if(this.circleInfo.followStatus == 0){
								ajax.post(api.circle.follow,{ID: me.cid},function () {
									this.circleInfo.followStatus=1;
								})
							}else if(this.circleInfo.followStatus==1){
								mui.confirm("确定要取消关注吗？","学园",["确定","取消"],function (e) {
									if(e.index === 0){
										ajax.post(api.circle.unFollow,{ID: me.cid},function () {
											this.circleInfo.joinStatus=0;
											this.circleInfo.followStatus=0;
										})
									}
								});
							}
							
						},
						getCircleInfo:function(){
							var me = this;
							var current = plus.webview.currentWebview();
							me.cid= current.cid;
							circle.getcircledetail(me.cid,function (data){
									me.circleInfo = data;
								},function (){
									showPage(current);
								}
							);
						},
						getQuestion: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageQuestion = isRefresh?1:me.paramObj.CurPageQuestion+1;
							circle.gettopicslist({
								ID:me.cid,
								PageSize: me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageQuestion,
							},function (data) {
								me.questions=isRefresh?data:me.questions.concat(data);
								nomore=data.length<me.paramObj.PageSize;
							},function () {
								ui.clearScrollAnimal(me.scrollQuestion.puller, isRefresh, nomore);
							})
						},
						getMember: function (isRefresh) {
							var me = this;
							var nomore = false;
							me.paramObj.CurPageMember = isRefresh?1:self.paramObj.CurPageMember+1;
							circle.getmemberslist({
								ID:me.cid,
								PageSize: me.paramObj.PageSize,
								CurPage: me.paramObj.CurPageMember,
							},function (data) {
								me.members=isRefresh?data:me.members.concat(data);
								nomore=data.length<me.paramObj.PageSize;
							},function () {
								ui.clearScrollAnimal(me.scrollMember.puller, isRefresh, nomore);
							})
						},
					}
				})
		</script>	
	</body>

</html>